<template>
  <div class="component-projectList">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>补盲扩项目
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <div class="component_btnGroup">
      <el-button-group>
        <el-button
          @click="handleClick('first')"
          :style="chooseBtn=='first'?'color:#fff;background:#1abc9c;':'color:#666;background:#fff;'"
        >全部项目</el-button>
        <el-button
          @click="handleClick('second')"
          :style="chooseBtn=='second'?'color:#fff;background:#1abc9c;':'color:#666;background:#fff;'"
        >已竣工</el-button>
        <el-button
          @click="handleClick('third')"
          :style="chooseBtn=='third'?'color:#fff;background:#1abc9c;':'color:#666;background:#fff;'"
        >施工中</el-button>
      </el-button-group>
    </div>
    <div>
      <div class="component-searchHeader">
        <div class="search-header">
          <div class="left-title">
            <p class="left-text">
              <span class="iconfont" style="font-weight:700">&#xe63d;</span>筛选查询
            </p>
            <div class="right">
              <button @click="searchInfo()">查询</button>
            </div>
          </div>
        </div>
      </div>

      <div class="component-search-box">
        <el-form :inline="true" :model="projectSearch" label-width="110px" class="demo-form-inline">
          <el-form-item label="输入搜索：" style="width:330px;">
            <el-input
              v-model="projectSearch.info"
              placeholder="工单号/项目名称"
              clearable
              style="width:217px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="工单委托日期：" style="width:330px;">
            <el-date-picker
              v-model="projectSearch.date"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="timestamp"
              style="width:217px;"
              default-time="00:00:00"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="  项目部："
            style="width:330px;"
            v-if="ms_roleName != 'AreaManager' && ms_roleName != 'WorkTeamManager' && ms_roleName != 'ProjectClerk' && ms_roleName != 'ProjectManager'"
          >
            <el-select v-model="projectSearch.org" placeholder="请选择项目部" clearable>
              <el-option
                v-for="item in orgs"
                :key="item.orgId"
                :label="item.orgName"
                :value="item.orgId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目状态：" style="width:330px;">
            <el-select
              v-model="projectSearch.progress"
              placeholder="请选择项目状态"
              clearable
              style="width:217px;"
            >
              <el-option
                v-for="item in progress"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="当前现场状态：" style="width:330px;">
            <el-select
              v-model="projectSearch.bmkLink"
              placeholder="请选择现场状态"
              clearable
              style="width:217px;"
            >
              <el-option label="无法扩容" value="1"></el-option>
              <el-option label="待扩容" value="0"></el-option>
              <el-option label="扩容完成" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div class="component-listHeader">
        <div class="search-header">
          <div class="left-title">
            <p class="left-text">
              <span class="iconfont">&#xe61e;</span>
              项目列表
            </p>
            <div class="right">
              <button @click="input" style="width:100px;" v-show="ms_roleName == 'ProjectClerk'">导入工单</button>
            </div>
          </div>
        </div>
      </div>

      <div class="table">
        <el-table
          ref="multipleTable"
          :data="projectInfo"
          tooltip-effect="dark"
          style="width: 1100px;margin:0 auto"
          border
          @selection-change="handleSelectionChange"
          :row-key="getRowKey"
        >
          <el-table-column
            type="selection"
            :reserve-selection="true"
            align="center"
            width="50"
             fixed="left"
            v-if="ms_roleName == 'ProjectClerk'"
          ></el-table-column>
          <el-table-column
            label="施工公司"
            align="center"
            width="120"
            prop="bmkWorkteam"
            v-if="ms_roleName == 'AreaManager' || ms_roleName == 'WorkTeamManager'"
          ></el-table-column>
          <el-table-column
            label="施工队"
            align="center"
            width="120"
            prop="proTeam"
            v-if="ms_roleName == 'AreaManager' || ms_roleName == 'WorkTeamManager'"
          ></el-table-column>
          <el-table-column
            label="分配区"
            align="center"
            width="120"
            prop="bmkArea"
            v-if="ms_roleName == 'ProjectClerk' && ms_roleName == 'ProjectManager'"
          ></el-table-column>
          <el-table-column
            label="分配项目部"
            align="center"
            width="120"
            prop="belongOrg"
            v-if="ms_roleName != 'AreaManager' && ms_roleName != 'WorkTeamManager' && ms_roleName != 'ProjectClerk' && ms_roleName != 'ProjectManager'"
          ></el-table-column>
          <el-table-column label="所属网格" align="center" width="120" prop="bmkGrid"></el-table-column>
          <el-table-column label="所属单位" align="center" width="120" prop="bmkOrg"></el-table-column>
          <!-- <el-table-column label="分配项目部" align="center" width="110" prop="belongOrg"></el-table-column> -->
          <el-table-column label="工单号" align="center" width="170" prop="bmkRelevanceNo"></el-table-column>
          <el-table-column label="项目名称" align="center" width="250" prop="proName"></el-table-column>
          <el-table-column label="工单委托日期" align="center" width="145" prop="entrustDate">
            <template slot-scope="scope">{{scope.row.entrustDate|dateFilter}}</template>
          </el-table-column>
          <el-table-column label="项目状态" align="center" width="100" prop="proProgress"></el-table-column>
          <el-table-column label="现场当前环节" align="center" width="100" prop="bmkLink">
            <!-- <template slot-scope="scope">
              <span v-show="scope.row.bmkLink == '0'">待扩容</span>
              <span v-show="scope.row.bmkLink == '1'">无法扩容</span>
              <span v-show="scope.row.bmkLink == '2'">扩容完成</span>
            </template> -->
          </el-table-column>
          <el-table-column label="操作" width="145" align="center" fixed="right">
            <template slot-scope="scope">
              <div>
                <el-button
                  @click="$router.push({name:'expansionDetail',params:{proId:scope.row.proId}})"
                  v-show="scope.row.bmkLink != '无法扩容'"
                  type="text"
                  size="small"
                  class="red"
                >查看详情</el-button>
              </div>
              <div>
                <el-button
                  @click="$router.push({name:'problemDetail',params:{proId:scope.row.proId}})"
                  v-show="scope.row.bmkLink == '无法扩容'"
                  type="text"
                  size="small"
                  class="red"
                >查看详情(问题项目)</el-button>
              </div>
              <div>
                <el-button
                  @click="$router.push({name:'expansionData',query:{proId:scope.row.proId}})"
                  v-show="scope.row.makeAcceptFile == '1'"
                  type="text"
                  size="small"
                  class="red"
                >验收资料</el-button>
              </div>
              <div>
                <el-button
                  @click="takeCompList(scope.row.proId)"
                  v-show="ms_roleName == 'WorkTeamManager' && scope.row.proProgress == '未派单'"
                  type="text"
                  size="small"
                  class="red"
                >抢单</el-button>
              </div>
              <div>
                <el-button
                  @click="archive(scope.row.proId)"
                  v-show="scope.row.bmkLink == '无法扩容' && ms_roleName == 'ProjectClerk'"
                  type="text"
                  size="small"
                  class="red"
                >问题项目归档</el-button>
              </div>
              <div>
                <el-button
                  @click="$router.push({name:'expansionWorkLoad',params:{proId:scope.row.proId}})"
                  v-show="ms_roleName == 'AreaManager' && scope.row.workFlowStep == '施工队提交审核' && scope.row.proProgress == '工作量审核'"
                  type="text"
                  size="small"
                  class="red"
                >工作量审核</el-button>
              </div>
              <div>
                <el-button
                  @click="$router.push({name:'expansionWorkLoad',params:{proId:scope.row.proId}})"
                  v-show="ms_roleName == 'ProjectClerk' && scope.row.workFlowStep == '大区经理审核通过' && scope.row.proProgress == '工作量审核'"
                  type="text"
                  size="small"
                  class="red"
                >工作量审核</el-button>
              </div>
              <div>
                <el-button
                  @click="archive(scope.row.proId)"
                  v-show="scope.row.bmkLink != '无法扩容' && ms_roleName == 'ProjectClerk' && scope.row.proProgress == '验收'"
                  type="text"
                  size="small"
                  class="red"
                >归档</el-button>
              </div>
              <!-- <el-button
                @click="$router.push({name:'sendOrder',params:{proId:scope.row.proId}})"
                type="text"
                size="small"
                class="red"
              >派单</el-button>-->
              <!-- <el-button
                @click="bigAreaSendOrder(scope.row)"
                type="text"
                size="small"
                class="red"
              >派单</el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="component-paging" v-show="projectInfo.length>0">
        <div class="table-bottom">
          <div class="bottom-left">
            <button
              @click="outputData"
              v-if="ms_roleName == 'ProjectClerk' && chooseBtn=='second'"
              style="width:130px;"
            >生成紧急扩容资料</button>
            <button
              @click="outputTotal"
              v-if="ms_roleName == 'ProjectClerk'"
              style="width:110px;"
            >生成统计总表</button>
          </div>
          <div class="paging">
            <div class="paging-left">
              <p>
                共
                <span>{{Math.ceil(Page.RowCount/Page.PageSize)}}</span> 页/
                <span>{{Page.RowCount}}</span> 条数据
              </p>
            </div>
            <el-pagination
              background
              @size-change="SizeChange($event,projectInit,Page.CurrentPage,Page.PageSize)"
              @current-change="CurrentChange($event,projectInit,Page.CurrentPage,Page.PageSize)"
              :current-page.sync="Page.CurrentPage"
              :page-sizes="[10, 20, 30 ,50 ,100]"
              :page-size.sync="Page.PageSize"
              layout="sizes, prev, pager, next, jumper"
              :total="Page.RowCount"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!--导入工单弹框-->
    <div class="component-models">
      <el-dialog title="导入工单" :visible.sync="dialogInput" width="660px">
        <el-upload
          class="upload-demo"
          action="/api/web/sysFile/uploadFile"
          :headers="myheader"
          :data="exe_data"
          :on-success="handleSuccess"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="1"
          accept=".xls, .xlsx, .XLS, .XLSX"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogInput = false">取消</el-button>
          <el-button @click="submitChange">完成</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 分配弹窗列表 -->
    <div class="component-model">
      <el-dialog
        title="分配确认"
        :visible.sync="dialogAllocation.flag"
        width="1140px"
        :before-close="closeAllocation"
      >
        <div class="input-box">
          <div class="checkbox">
            <el-table
              ref="multipleTable"
              :data="allocationData"
              tooltip-effect="dark"
              style="width:100%"
              border
            >
              <el-table-column label="所属网络" align="center" width="110" prop="bmkGrid"></el-table-column>
              <el-table-column label="分配区域" align="center" width="90" prop="bmkBelongArea"></el-table-column>
              <el-table-column label="需求日期" align="center" width="110" prop="matName">
                <template slot-scope="scope">{{scope.row.needDate|timeFilter}}</template>
              </el-table-column>
              <el-table-column label="所属单位" align="center" width="130" prop="bmkOrg"></el-table-column>
              <el-table-column label="修补扩类型" align="center" width="120" prop="bmkFixType"></el-table-column>
              <el-table-column label="工单号" align="center" width="170" prop="bmkRelevanceNo"></el-table-column>
              <el-table-column label="片区" align="center" width="90" prop="bmkArea"></el-table-column>
              <el-table-column label="镇区" align="center" width="90" prop="bmkTown"></el-table-column>
              <el-table-column label="地址id" align="center" width="140" prop="bmkAddressId"></el-table-column>
              <el-table-column label="五级站点" align="center" width="230" prop="bmkStation"></el-table-column>
              <el-table-column label="需求内容" align="center" width="500" prop="bmkNeedContent"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="component-paging">
              <div class="table-bottom">
                <div class="bottom-left" style="margin-left: 0px;">
                  <span v-show="errorCount>0" class="errorWarning">错误：有{{errorCount}}条地址信息未找到,请修改导入文件再重新上传！</span>
                </div>
                <div class="paging">
                  <div class="paging-left">
                    <p>
                      共
                      <span>{{Math.ceil(dialogAllocation.total/dialogAllocation.pageSize)}}</span> 页/
                      <span>{{dialogAllocation.total}}</span> 条数据
                    </p>
                  </div>
                  <el-pagination
                    background
                    @size-change="SizeChange($event,allocationInit,dialogAllocation.currentPage,dialogAllocation.pageSize)"
                    @current-change="CurrentChange($event,allocationInit,dialogAllocation.currentPage,dialogAllocation.pageSize)"
                    :current-page.sync="dialogAllocation.currentPage"
                    :page-sizes="[10, 20, 30]"
                    :page-size.sync="dialogAllocation.pageSize"
                    layout="sizes, prev, pager, next, jumper"
                    :total="dialogAllocation.total"
                  ></el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeAllocation">取消</el-button>
          <el-button @click="submitAllocation">确定</el-button>
        </span>
      </el-dialog>
    </div>

    <!--大区负责人派单 弹框-->
    <div class="component-models">
      <el-dialog title="派单" :visible.sync="bigAreaSendInfo.flag" width="660px">
        <el-form
          :model="bigAreaSendInfo.info"
          ref="changeOrder"
          label-width="200px"
          class="demo-ruleForm"
        >
          <el-form-item label="施工公司:">
            <el-select
              v-model="bigAreaSendInfo.info.type"
              placeholder="请选择施工公司"
              style="width:217px;"
              @change="getComp"
            >
              <el-option
                v-for="item in bigAreaSendInfo.info.options"
                :key="item.label"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司负责人:">
            <span style="float: left;">{{bigAreaSendInfo.info.orgName}}</span>
          </el-form-item>
          <el-form-item label="备注:">
            <el-input type="textarea" v-model="bigAreaSendInfo.info.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="bigAreaSendInfo.flag = false">取消</el-button>
          <el-button @click="submitBigAreaOrder">派单</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "projectList",
  data() {
    return {
      ms_roleName: localStorage.getItem("roleName"),
      //按钮组的选中值
      chooseBtn: "first",
      //搜索框的值
      projectSearch: {
        info: "",
        date: "",
        progress: "",
        org: "",
        bmkLink: ""
      },
      // 项目部下拉框数据
      orgs: [],
      // 项目状态下拉框的值
      progress: [
        { name: "未派单", value: "2" },
        { name: "未进场", value: "3" },
        { name: "施工中", value: "4" },
        { name: "工程作业完工", value: "5" },
        { name: "工作量审核", value: "6" },
        { name: "验收", value: "7" },
        { name: "竣工", value: "8" }
      ],
      //table数据
      projectInfo: [],
      Page: {
        RowCount: 1,
        CurrentPage: 1,
        PageSize: 10
      },
      dialogInput: false,
      //   上传文件列表
      fileList: [],
      //   当页全选列表
      multipleSelection: [],
      // 文件上传data
      exe_data: {
        parentId: "bmkWorkOrder",
        bizType: "bmk.work.order",
        userId: localStorage.getItem("ms_userId")
      },
      // 批次id
      batchId: "",
      // token
      myheader: { token: localStorage.getItem("token") },
      // 分配确认列表
      allocationData: [],
      // 导入后解析错误的数据个数
      errorCount:0,
      // 分配确认列表弹窗bool值，分页
      dialogAllocation: {
        flag: false,
        total: 1,
        currentPage: 1,
        pageSize: 10
      },
      // 大区负责人 派单
      bigAreaSendInfo: {
        flag: false,
        info: {}
      },
      // 根路径
      baseUrl: img_url
    };
  },
  methods: {
    // 获取条件查询的项目部下拉框的数据
    orgInit() {
      let that = this,
        suCb = res => {
          console.log("项目部结果：", res);
          that.orgs = res.data.data;
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/sysOrg/selectProjectOrg",
          methods: "post",
          data: {},
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    //标签页切换
    handleClick(active) {
      this.Page = {
        RowCount: 1,
        CurrentPage: 1,
        PageSize: 10
      };
      this.projectSearch = {
        info: "",
        date: "",
        progress: "",
        org: "",
        bmkLink: ""
      };
      // 当选项卡切换的时候重置分页部分数据和条件查询，然后判断切换的哪一个标签页，来判断应该传什么状态像后端发起请求
      switch (active) {
        case "first":
          this.progress = [
            { name: "未派单", value: "2" },
            { name: "未进场", value: "3" },
            { name: "施工中", value: "4" },
            { name: "工程作业完工", value: "5" },
            { name: "工作量审核", value: "6" },
            { name: "验收", value: "7" },
            { name: "竣工", value: "8" }
          ];
          // 全部项目 就传[0, 1, 2, 3, 4, 5, 6,]
          break;
        case "second":
          this.progress = [{ name: "竣工", value: "8" }];
          // 已竣工 就传[6] -- 已完工
          break;
        case "third":
          this.progress = [
            { name: "未派单", value: "2" },
            { name: "未进场", value: "3" },
            { name: "施工中", value: "4" },
            { name: "工程作业完工", value: "5" },
            { name: "工作量审核", value: "6" },
            { name: "验收", value: "7" }
          ];
          // 施工中 就传[0,1,2,3,4,5] -- 除了已完工的状态都算施工中
          break;
      }
      this.chooseBtn = active;
      this.$refs.multipleTable.clearSelection();
      this.projectInit();
    },
    // 查询按钮
    searchInfo() {
      this.Page.CurrentPage = 1;
      // this.$nextTick(()=>{
      //   this.$refs.multipleTable.clearSelection();
      // })
      this.$refs.multipleTable.clearSelection();
      this.projectInit();
    },
    //项目列表-查询
    projectInit() {
      let that = this,
        // let一个arr 如果条件查询框有值，就转化成数字塞入数组中，为空就赋值为progress的value值数组
        arr =
          that.projectSearch.progress == "" ||
          that.projectSearch.progress == null
            ? that.progress.map(item => {
                return item.value;
              })
            : [that.projectSearch.progress],
        suCb = res => {
          console.log("项目列表查询结果：", res);
          that.projectInfo = that.deepClone(res.data.data);
          that.Page.RowCount = res.data.rowCount;
        },
        erCb = res => {},
        params = {
          pageCurrent: that.Page.CurrentPage,
          pageSize: that.Page.PageSize,
          progress: arr,
          entrustDate: that.projectSearch.date + "",
          bmkLink: that.projectSearch.bmkLink,
          proName: that.projectSearch.info,
          belongOrg: that.projectSearch.org
        },
        req = {
          url: "/api/web/proProject/selectBmkPro",
          methods: "post",
          data: params,
          success: suCb,
          error: erCb
        };
      console.log("项目列表查询参数：", params);
      that.$https(req);
    },
    // 归档按钮
    archive(id) {
      // 不用判断普通归档或问题项目归档 后台处理
      let that = this,
        suCb = res => {
          console.log("归档结果：", res);
          that.$msg("归档成功");
          that.projectInit();
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proProject/changeBmkOverProProgress",
          methods: "post",
          data: { proId: id },
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    // 导入按钮
    input() {
      this.dialogInput = true;
    },

    // 上传的几个处理函数
    // 上传成功的回调函数
    handleSuccess(res, file, fileList) {
      console.log(res, file, fileList);
      if (res.flag == 1) {
        // this.dataUploadInfoInit();
        this.workOrder(res.fileUrl);
      } else if (res.flag == 2) {
        this.$erMsg("请重新登录");
        this.$router.push({ name: "login" });
      } else if (res.flag == 0) {
        this.$erMsg("上传失败");
        this.fileList = [];
        //  this.dataUploadInfoInit();
      }
    },
    handleRemove(file, fileList) {
      that.fileList = []
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    // 生成紧急扩容资料
    outputData() {
      if (
        this.multipleSelection != undefined &&
        this.multipleSelection.length >= 1
      ) {
        // this.$router.push({ name: "expansionData", params: {} });
        let that = this,
          suCb = res => {
            console.log("结果：", res);
            let a = document.createElement("a");
            a.href = baseUrl + res.data.data.url;
            a.download = res.data.data.fileName;
            // a.target = '_blank'
            a.click();
            that.$msg("生成成功");
          },
          erCb = res => {
            console.log(res);
          },
          req = {
            url: "/api/web/sysFile/toProcessExecl",
            methods: "post",
            data: { proIds: that.multipleSelection },
            success: suCb,
            error: erCb
          };
        that.$https(req);
      } else {
        this.$erMsg("请选择至少一个项目");
      }
    },
    // 生成统计总表
    outputTotal() {
      if (
        this.multipleSelection != undefined &&
        this.multipleSelection.length >= 1
      ) {
        this.$router.push({ name: "outputTotalTable" ,query:{proIds:this.multipleSelection}});
      } else {
        this.$erMsg("请选择至少一个项目");
      }
    },
    //全选
    handleSelectionChange(val) {
      let arr = [];
      if (val.length > 0) {
        val.forEach(item => {
          // arr.push({ proId: item.proId, bmkRelevanceNo: item.bmkRelevanceNo });
          arr.push(item.proId);
          this.multipleSelection = arr;
        });
      } else {
        this.multipleSelection = [];
      }
      console.log(this.multipleSelection);
      //   let storageExpansion = localStorage.getItem('checkedExpansion')
      //   storageExpansion = storageExpansion.push(this.multipleSelection)
      //   localStorage.setItem('checkedExpansion',storageExpansion)
    },
    // 上传工单后 调用接口解析
    workOrder(fileUrl) {
      let that = this,
        suCb = res => {
          console.log("导入结果：", res);
          that.batchId = res.data.data.batchId;
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proProject/importExcelForProject",
          methods: "post",
          data: { fileName: fileUrl },
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    // 导入工单完成按钮
    submitChange() {
      if (this.batchId != "") {
        this.errorCount = 0;
        this.dialogAllocation.flag = true;
        this.allocationInit();
      } else {
        this.$erMsg("请先上传文件并等待服务器解析");
      }
    },
    // 分配弹窗列表
    allocationInit() {
      let that = this,
        suCb = res => {
          console.log("列表结果：", res);
          that.dialogAllocation.total = res.data.data.rowCount;
          that.allocationData = res.data.data.ProProject;
          that.errorCount = res.data.data.badRowCount;
          console.log(that.allocationData);
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proProject/findImportExcelData",
          methods: "post",
          data: {
            pageSize: that.dialogAllocation.pageSize,
            pageCurrent: that.dialogAllocation.currentPage,
            batchId: that.batchId
          },
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    // 分配弹窗确定按钮
    submitAllocation(type) {
      let that = this,
        suCb = res => {
          console.log("列表结果：", res);
          if (type) {
            that.$msg("确认成功");
            that.dialogAllocation = {
              flag: false,
              total: 1,
              currentPage: 1,
              pageSize: 10
            };
            that.fileList = [];
            that.dialogInput = false;
            that.projectInit();
          }
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proProject/confirmProProject",
          methods: "post",
          data: { batchId: that.batchId },
          success: suCb,
          error: erCb
        };
      //根据errorCount判断是否能确认提交
      if (that.errorCount>0) {
        that.$erMsg('有错误数据，请确认后重新修改导入文件！')
      } else {
        that.$https(req);
      }
    },
    // 分配弹窗关闭处理函数
    closeAllocation() {
      this.$confirm("关闭后目前分配数据将会丢失，需要重新导入工单，确定关闭吗？", "警告", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.dialogAllocation = {
            flag: false,
            total: 1,
            currentPage: 1,
            pageSize: 10
          };
          this.dialogInput = false;
          this.fileList = [];
          // this.submitAllocation();
        })
        .catch(action => {
          console.log("error!");
        });
    },
    // 大区负责人派单按钮
    bigAreaSendOrder(row) {
      this.bigAreaSendInfo.flag = true;
    },
    // 大区负责人派单 提交按钮
    submitBigAreaOrder() {
      let that = this,
        suCb = res => {
          console.log("结果：", res);
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/",
          methods: "post",
          data: { proId: id },
          success: suCb,
          error: erCb
        };

      that.$https(req);
    },
    // 施工公司下拉框change函数
    getComp() {},
    // 记录全选后的key值
    getRowKey(row) {
      return row.proId;
    },
    // 接单
    takeCompList(id) {
      let that = this,
        suCb = res => {
          console.log(res);
          if (res.data.data.proNum < res.data.data.limtNum) {
            that.$router.push({ name: "takeOrder", params: { proId: id } });
            console.log(id);
          } else {
            that.$erMsg("已超过接单上限！");
          }
        };
      let erCb = res => {
        console.log(res);
      };
      let params = {
        url: "/api/web/proProject/ifBMKProTooMuch",
        methods: "post",
        data: {},
        success: suCb,
        error: erCb
      };
      that.$https(params);
    }
  },
  created() {
    this.orgInit();
    this.projectInit();
  }
};
</script>

<style scoped>
.component-projectList .tabs-header {
  width: 1150px;
  box-sizing: border-box;
  margin: 20px auto 0;
}

.component-searchHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
}

.component-searchHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-searchHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  line-height: 45px;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-searchHeader .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}

.component-searchHeader .right button {
  padding: 0 25px;
  height: 30px;
  margin: 8px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-searchHeader .right button:hover {
  background-color: #f3f3f3;
}
.component-search-box {
  width: 1100px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-top: none;
  margin: 0 auto;
  text-align: left;
  padding-left: 30px;
  line-height: 60px;
  padding-bottom: 15px;
  padding-top: 15px;
}
.component-search-box .el-input__inner {
  height: 35px;
  display: inline-block;
}
.el-form-item {
  margin-bottom: 0;
}
.component-listHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  border-bottom: none;
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
}

.component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  line-height: 45px;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-listHeader .search-header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.component-listHeader .search-header .right button {
  padding: 0 15px;
  height: 30px;
  width: 110px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #1abc9c;
  background-color: #fff;
  border: 1px solid #ccc;
}
.el-form-item {
  width: 310px;
}
.component-listHeader .search-header .right button:hover {
  background-color: #1abc9c;
  color: #fff;
}
.component-listHeader .search-header .right .right-select-margin {
  margin-top: 8px;
  margin-right: 8px;
}
/* 删除按钮 */
.red {
  color: #48c9b0;
  font-size: 12px;
}

/* 下载列表 */
.download-list {
  width: 100%;
  margin: 20px auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.download-list > div:first-child {
  width: 25%;
}

.download-list > div:first-child > span {
  width: 100%;
  padding-right: 10px;
  font-size: 14px;
  text-align: right;
}

.component-models .el-form-item {
  width: 512px;
  margin-bottom: 10px;
}
.component-models .el-select {
  left: -50px;
}

.el-textarea {
  display: block;
  margin-top: 13px;
}

.component_btnGroup {
  margin: 20px auto 0;
  text-align: left;
  width: 1100px;
}

.errorWarning{
  margin-left: 15px;
  color:#f00;
  font-size: 18px;
  font-weight: 600;
}
</style>

